import { useState, useEffect } from 'react';
import { App, Card, Row, Col, Statistic } from 'antd';
import { MainLayout } from '~/layouts/MainLayout';
import { questionApi, knowledgeApi, categoryApi } from '~/services/api';

export default function Dashboard() {
    const [stats, setStats] = useState({
        questionCount: 0,
        knowledgeCount: 0,
        categoryCount: 0
    });

    const fetchStats = async () => {
        try {
            const [questions, knowledge, categories] = await Promise.all([
                questionApi.list({}),
                knowledgeApi.list({}),
                categoryApi.list({})
            ]);

            setStats({
                questionCount: questions.data.total || 0,
                knowledgeCount: knowledge.data.total || 0,
                categoryCount: categories.data?.items?.length || 0
            });
        } catch (error) {
            console.error('获取统计数据失败', error);
        }
    };

    useEffect(() => {
        fetchStats();
    }, []);

    return (
        <App>
            <MainLayout>
                <div className="bg-white p-6 rounded-lg">
                    <h1 className="text-2xl mb-6">仪表盘</h1>
                    <Row gutter={16}>
                        <Col span={8}>
                            <Card>
                                <Statistic
                                    title="题目总数"
                                    value={stats.questionCount}
                                    valueStyle={{ color: '#1677ff' }}
                                />
                            </Card>
                        </Col>
                        <Col span={8}>
                            <Card>
                                <Statistic
                                    title="知识点总数"
                                    value={stats.knowledgeCount}
                                    valueStyle={{ color: '#52c41a' }}
                                />
                            </Card>
                        </Col>
                        <Col span={8}>
                            <Card>
                                <Statistic
                                    title="分类总数"
                                    value={stats.categoryCount}
                                    valueStyle={{ color: '#faad14' }}
                                />
                            </Card>
                        </Col>
                    </Row>
                </div>
            </MainLayout>
        </App>
    );
}